<!DOCTYPE HTML>
<html lang="zh-CN">

<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="ydong博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="http://ydongabc.gitee.io/blog">
    <!--SEO-->

<meta name="keywords" content>


<meta name="description" content>


<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">
    <!--Title-->

<title>
    
    分类: 前端 |
    
    ydong博客
</title>

<link rel="alternate" href="/atom.xml" title="ydong博客" type="application/atom+xml">


<link rel="icon" href="./favicon.ico">

    

<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.7.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">
    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

</head></html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    /blog/./img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='John Doe'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="http://ydongabc.gitee.io/blog">
                        ydong博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/前端/"><i class="fa "></i>
                                前端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/后端/"><i class="fa "></i>
                                后端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/工具/"><i class="fa "></i>
                                工具</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content ">
                    <ol class="breadcrumb">
    
    <li>
        前端
    </li>
    
</ol>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/11/01/遍历函数相关api/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/js.jpg" alt="遍历函数相关api">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/11/01/遍历函数相关api/">
                    遍历函数相关api</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年11月01日
                </time>
            </div>
        </div>
        <p class="brief">
            
            【forEach】：返回void 遍历数组并执行函数。
【some】：Boolean 遍历数组并执行回调，只要有一个数组元素通过回调函数的测试则返回true，并立即终止循环，否则返回false。 
【filter】：返回新的Array...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/31/vue-preview缩略图片查看器插件/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/vue.jpg" alt="vue-preview 缩略图片查看器插件">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/31/vue-preview缩略图片查看器插件/">
                    vue-preview 缩略图片查看器插件</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月31日
                </time>
            </div>
        </div>
        <p class="brief">
            
            功能：手机端点击图片查看大图使用方法：1.装包：$ cnpm i vue-preview -s2.main.js引入12import VuePreview from &#39;vue-preview&#39;Vue.use(VuePreview)

...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/23/前端数据分页展示方法/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/vue.jpg" alt="前端数据分页展示方法">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/23/前端数据分页展示方法/">
                    前端数据分页展示方法</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月23日
                </time>
            </div>
        </div>
        <p class="brief">
            
            对数据数组使用 slice() 方法12345678v-for=&#34;item in data.slice((currpage - 1) * pagesize, currpage * pagesize)&#34;data()&amp;#123;  ret...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/23/时间格式转换方法/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/vue.jpg" alt="时间格式转换方法">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/23/时间格式转换方法/">
                    时间格式转换方法</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月23日
                </time>
            </div>
        </div>
        <p class="brief">
            
            将 毫秒级 转换为 年月份
1.函数转换12345678910111213function dateFormat(timestamp) &amp;#123;    var date = new Date(timestamp );	//时间戳为...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/20/vue项目中使用echarts统计图/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/vue.jpg" alt="vue项目中使用 echarts 统计图">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/20/vue项目中使用echarts统计图/">
                    vue项目中使用 echarts 统计图</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月20日
                </time>
            </div>
        </div>
        <p class="brief">
            
            1.安装echarts依赖$ npm install echarts -s2.main.js全局引入123// 引入echartsimport echarts from &#39;echarts&#39;Vue.prototype.$echarts ...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/20/原生js获取、设置、删除属性/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/js.jpg" alt="原生js获取、设置、删除属性">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/20/原生js获取、设置、删除属性/">
                    原生js获取、设置、删除属性</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月20日
                </time>
            </div>
        </div>
        <p class="brief">
            
            1.获取属性123element.getAttribute(&#39;属性名&#39;)； //返回指定元素属性名的属性值 element.getAttributeNode(&#39;属性名&#39;)； //返回指定元素的属性名和属性值 element.attri...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/12/axios的基本使用/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/vue.jpg" alt="axios的基本使用">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/12/axios的基本使用/">
                    axios的基本使用</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月12日
                </time>
            </div>
        </div>
        <p class="brief">
            
            1.安装$ npm install axios -s2.main.js引入12import axios from &#39;axios&#39;    //axios不需要Vue.use()引入Vue.prototype.$axios = axios...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/05/前端开发中79条不可忽视的知识点汇总/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/h5.jpg" alt="前端开发中79条不可忽视的知识点汇总">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/05/前端开发中79条不可忽视的知识点汇总/">
                    前端开发中79条不可忽视的知识点汇总</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月05日
                </time>
            </div>
        </div>
        <p class="brief">
            
            1.css禁用鼠标事件12345.disabled &amp;#123;    pointer-events: none;    cursor: default;    opacity: 0.6;&amp;#125;

2.get/post的理解和他...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/05/常用杂碎知识点/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/h5.jpg" alt="常用杂碎知识点">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/05/常用杂碎知识点/">
                    常用杂碎知识点</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月05日
                </time>
            </div>
        </div>
        <p class="brief">
            
            1.vs code 常用快捷键中途换行：Ctrl+Enter换到上一行开始：Ctrl+Shift+Enter移动行：alt + up/show选中当前行：Ctrl + L复制当前行：shift + alt +up/down删除当前行：...
            
        </p>
    </div>
</article>

<article class="post">
    
    <div class="post-media">
        <a href="/blog/2019/10/02/弹性布局flex/">
            <img class="img-ajax" src="/blog/img/loading.gif" data-src="/blog/./img/css.jpg" alt="弹性布局flex">
        </a>
    </div>
    
    <div class="post-content">
        <div class="post-head home-post-head">
            <h1 class="post-title">
                <a href="/blog/2019/10/02/弹性布局flex/">
                    弹性布局flex</a>
            </h1>
            <div class="post-meta"> &bull;
                <time class="post-date" datetime="" title="">
                    2019年10月02日
                </time>
            </div>
        </div>
        <p class="brief">
            
            弹性布局，又称“Flex布局”，可以简便、完整、响应式地实现各种页面布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称”项目”…
            
        </p>
    </div>
</article>


<nav class="pagination" role="navigation">
    <div id="page-nav">
        <a class="extend prev" rel="prev" href="/blog/categories/前端/"><i class='fa fa-angle-left'></i></a><a class="page-number" href="/blog/categories/前端/">1</a><span class="page-number current">2</span><a class="page-number" href="/blog/categories/前端/page/3/">3</a><a class="extend next" rel="next" href="/blog/categories/前端/page/3/"><i class='fa fa-angle-right'></i></a>
    </div>
</nav>

                </main>
                
                    
<aside class="col-md-4 sidebar">
    
    
<div class="widget">
    <h3 class="title">
        搜索
    </h3>
    <div id="search-form">
        <div id="result-mask" class="hide"></div>
        <div class="search-area">
            
            <input id="search-key" type="search" autocomplete="off" placeholder="搜点什么呢？">
            <button type="button" class="search-form-submit" id="search-local">
                站内搜索</button>
            
            
        </div>
        <div id="result-wrap" class="hide">
            <div id="search-result"></div>
        </div>
        <div class="hide">
            <template id="search-tpl">
                <div class="item">
                    <a href="/{path}" title="{title}">
                        <div class="title">{title}</div>
                        <div class="content">{content}</div>
                    </a>
                </div>
            </template>
        </div>
    </div>
</div>

    
    
<div class="widget">
    <h3 class="title">
        分类
    </h3>
    <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/hexo博客框架/"><i class="fa" aria-hidden="true">hexo博客框架</i></a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/前端/"><i class="fa" aria-hidden="true">前端</i></a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/前端/css3/"><i class="fa" aria-hidden="true">css3</i></a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/前端/css3/动画/"><i class="fa" aria-hidden="true">动画</i></a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/前端/h5/"><i class="fa" aria-hidden="true">h5</i></a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/前端/javascript/"><i class="fa" aria-hidden="true">javascript</i></a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/前端/vue/"><i class="fa" aria-hidden="true">vue</i></a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/前端/知识点/"><i class="fa" aria-hidden="true">知识点</i></a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/后端/"><i class="fa" aria-hidden="true">后端</i></a><span class="category-list-count">3</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/后端/nodeJS/"><i class="fa" aria-hidden="true">nodeJS</i></a><span class="category-list-count">3</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/工具/"><i class="fa" aria-hidden="true">工具</i></a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/工具/git/"><i class="fa" aria-hidden="true">git</i></a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/工具/vue-cli/"><i class="fa" aria-hidden="true">vue-cli</i></a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/工具/webpack/"><i class="fa" aria-hidden="true">webpack</i></a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/工具/调试/"><i class="fa" aria-hidden="true">调试</i></a><span class="category-list-count">1</span></li></ul></li></ul>
</div>

    
    
<div class="widget">
    <h3 class="title">
        标签云
    </h3>
    <div class="content tag-cloud">
        
        <a href="/blog/tags/Mock-js/" style="font-size: 10px;">Mock.js</a> <a href="/blog/tags/axios/" style="font-size: 10px;">axios</a> <a href="/blog/tags/css3/" style="font-size: 10px;">css3</a> <a href="/blog/tags/css属性获取/" style="font-size: 10px;">css属性获取</a> <a href="/blog/tags/echarts/" style="font-size: 10px;">echarts</a> <a href="/blog/tags/elementUI/" style="font-size: 10px;">elementUI</a> <a href="/blog/tags/fastclick-js/" style="font-size: 10px;">fastclick.js</a> <a href="/blog/tags/flex/" style="font-size: 10px;">flex</a> <a href="/blog/tags/fullPage-js/" style="font-size: 10px;">fullPage.js</a> <a href="/blog/tags/getBoundingClientRect/" style="font-size: 10px;">getBoundingClientRect()</a> <a href="/blog/tags/git/" style="font-size: 10px;">git</a> <a href="/blog/tags/h5活动页/" style="font-size: 10px;">h5活动页</a> <a href="/blog/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/blog/tags/hover动画/" style="font-size: 10px;">hover动画</a> <a href="/blog/tags/keep-alive/" style="font-size: 10px;">keep-alive</a> <a href="/blog/tags/meta标签/" style="font-size: 10px;">meta标签</a> <a href="/blog/tags/nodeJS基础/" style="font-size: 10px;">nodeJS基础</a> <a href="/blog/tags/promise/" style="font-size: 10px;">promise</a> <a href="/blog/tags/scoped穿透/" style="font-size: 10px;">scoped穿透</a> <a href="/blog/tags/url变量/" style="font-size: 10px;">url变量</a> <a href="/blog/tags/vue/" style="font-size: 10px;">vue</a> <a href="/blog/tags/vue-cli脚手架/" style="font-size: 20px;">vue-cli脚手架</a> <a href="/blog/tags/vue-preview/" style="font-size: 10px;">vue-preview</a> <a href="/blog/tags/web-worker/" style="font-size: 10px;">web worker</a> <a href="/blog/tags/webpack/" style="font-size: 20px;">webpack</a> <a href="/blog/tags/分页展示/" style="font-size: 20px;">分页展示</a> <a href="/blog/tags/前端数据排序/" style="font-size: 10px;">前端数据排序</a> <a href="/blog/tags/博客搭建/" style="font-size: 10px;">博客搭建</a> <a href="/blog/tags/变量提升/" style="font-size: 10px;">变量提升</a> <a href="/blog/tags/导航跳转报错/" style="font-size: 10px;">导航跳转报错</a> <a href="/blog/tags/常用/" style="font-size: 20px;">常用</a> <a href="/blog/tags/异步执行/" style="font-size: 10px;">异步执行</a> <a href="/blog/tags/弹性布局/" style="font-size: 10px;">弹性布局</a> <a href="/blog/tags/性能优化/" style="font-size: 10px;">性能优化</a> <a href="/blog/tags/手机调试/" style="font-size: 10px;">手机调试</a> <a href="/blog/tags/按需展示/" style="font-size: 10px;">按需展示</a> <a href="/blog/tags/接口/" style="font-size: 20px;">接口</a> <a href="/blog/tags/搜索功能/" style="font-size: 10px;">搜索功能</a> <a href="/blog/tags/数据存储/" style="font-size: 10px;">数据存储</a> <a href="/blog/tags/数据请求/" style="font-size: 10px;">数据请求</a> <a href="/blog/tags/时间格式转换/" style="font-size: 10px;">时间格式转换</a> <a href="/blog/tags/本地存储/" style="font-size: 10px;">本地存储</a> <a href="/blog/tags/滚动条位置/" style="font-size: 10px;">滚动条位置</a> <a href="/blog/tags/知识点/" style="font-size: 20px;">知识点</a> <a href="/blog/tags/移动端/" style="font-size: 10px;">移动端</a> <a href="/blog/tags/移动端单击/" style="font-size: 10px;">移动端单击</a> <a href="/blog/tags/统计图/" style="font-size: 10px;">统计图</a> <a href="/blog/tags/缩略图/" style="font-size: 10px;">缩略图</a> <a href="/blog/tags/获取元素位置/" style="font-size: 10px;">获取元素位置</a> <a href="/blog/tags/获取属性/" style="font-size: 10px;">获取属性</a> <a href="/blog/tags/表单/" style="font-size: 20px;">表单</a> <a href="/blog/tags/遍历/" style="font-size: 10px;">遍历</a> <a href="/blog/tags/页面性能/" style="font-size: 10px;">页面性能</a>
        
    </div>
</div>

    
    
<div class="widget">
    <h3 class="title">
        友链
    </h3>
    <div class="content friends-link">
        
        <a href="https://blog.csdn.net/weixin_45829115" class="fa" target="_blank">
            csdn博客地址</a>
        
    </div>
</div>

    
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>

<script src="/blog/js/search.js?rev=@@hash"></script>



<script src="/blog/js/app.js?rev=@@hash"></script>
</body>
</html>